<template>
  <div>
    <div class="bigColor">
        <span class="iconfont icon-zuo" @click="routeBack" ></span>
      <div class="clickCut">
        <!-- 若登录则1 注册则0 -->
        <div :class=" className==1?'cut':' '" @click="loginClick" >登录</div>
        <div :class=" className==0?'cut':' '" @click="registerClick" >注册</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    routeBack(){
      this.$router.push({
        path:'/'
      })
    },
    loginClick(){
      this.$emit('loginClick')
    },
    registerClick(){
      this.$emit('registerClick')
    }
  },
  props:['className']
};
</script>

<style lang="less" scoped>
.bigColor {
  background-color: #27b060;
  height: 133.333vw;
  border-radius: 0 0 11.111vw 55.555vw;
  .icon-zuo{
    font-weight: 700;
    color: #6ad061;
    font-size: 8.889vw;
    position: absolute;
    left: 2.778vw;
    top: 2.778vw;
  }
  .clickCut {
    display: flex;
    justify-content: space-around;
    width: 72.222vw;
    height: 13.889vw;
    line-height: 13.889vw;
    border-radius: 6.944vw;
    background-color: #6ad061;
    position: absolute;
    top: 12.5vw;
    left: 50%;
    transform: translateX(-50%);
    > div {
      padding: 0 8.333vw;
      flex: 1;
      color: #f7f7f7;
      font-weight: 700;
    }
    //被选中
    .cut {
      background-color: #f7f7f7;
      flex: none;
      padding: 0 16.667vw;
      border-radius: 6.944vw;
      color: #6ad061;
    }
  }
}
</style>